<template>
	<div class="network_monitoring" v-loading="loading">
		<el-row :gutter="16" type="flex" class="hardware_info">
			<el-col :span="6">
				<chart-card title="CPU">
					<el-descriptions border :column="1" class="descriptions_style">
						<el-descriptions-item label="核心数">{{ cpuData.cpuNum || 0 }}核</el-descriptions-item>
						<el-descriptions-item label="用户使用率">{{ cpuData.used || 0 }}%</el-descriptions-item>
						<el-descriptions-item label="系统使用率">{{ cpuData.sys || 0 }}%</el-descriptions-item>
						<el-descriptions-item label="当前空闲率">{{ cpuData.free || 0 }}%</el-descriptions-item>
					</el-descriptions>
				</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="内存">
					<el-descriptions border :column="1" class="descriptions_style">
						<el-descriptions-item label="总内存">{{ memData.total || 0 }}G</el-descriptions-item>
						<el-descriptions-item label="已用内存">{{ memData.used || 0 }}G</el-descriptions-item>
						<el-descriptions-item label="剩余内存">{{ memData.free || 0 }}G</el-descriptions-item>
						<el-descriptions-item label="使用率">{{ memData.usage || 0 }}%</el-descriptions-item>
					</el-descriptions>
				</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="JVM">
					<el-descriptions border :column="1" class="descriptions_style">
						<el-descriptions-item label="总内存">{{ jvmData.total || 0 }}M</el-descriptions-item>
						<el-descriptions-item label="已用内存">{{ jvmData.used || 0 }}M</el-descriptions-item>
						<el-descriptions-item label="剩余内存">{{ jvmData.free || 0 }}M</el-descriptions-item>
						<el-descriptions-item label="使用率">{{ jvmData.usage || 0 }}%</el-descriptions-item>
					</el-descriptions>
				</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="服务器信息">
					<el-descriptions border :column="1" class="descriptions_style">
						<el-descriptions-item label="服务器名称">{{ sysData.computerName }}</el-descriptions-item>
						<el-descriptions-item label="服务器IP">{{ sysData.computerIp }}</el-descriptions-item>
						<el-descriptions-item label="操作系统">{{ sysData.osName }}</el-descriptions-item>
						<el-descriptions-item label="系统架构">{{ sysData.osArch }}</el-descriptions-item>
					</el-descriptions>
				</chart-card>
			</el-col>
		</el-row>
		<div class="java_information">
			<chart-card title="JAVA虚拟机信息">
				<el-descriptions border class="descriptions_style">
					<el-descriptions-item label="Java名称">{{ jvmData.name }}</el-descriptions-item>
					<el-descriptions-item label="Java版本">{{ jvmData.version }}</el-descriptions-item>
					<el-descriptions-item label="启动时间">{{ jvmData.startTime }}</el-descriptions-item>
					<el-descriptions-item label="安装路径">{{ jvmData.home }}</el-descriptions-item>
					<el-descriptions-item label="运行时长">{{ jvmData.runTime }}</el-descriptions-item>
					<el-descriptions-item label="项目路径">{{ sysData.userDir }}</el-descriptions-item>
				</el-descriptions>
			</chart-card>
		</div>
		<div class="disk_information">
			<chart-card title="服务器信息">
				<el-table :data="sysFiles" height="100%" style="width: 100%">
					<el-table-column prop="dirName" label="盘符路径" min-width="320"></el-table-column>
					<el-table-column prop="sysTypeName" label="文件系统" min-width="80"></el-table-column>
					<el-table-column prop="typeName" label="盘符类型" min-width="180"></el-table-column>
					<el-table-column prop="total" label="总大小" min-width="100"></el-table-column>
					<el-table-column prop="free" label="可用大小" min-width="100"></el-table-column>
					<el-table-column prop="used" label="已用大小" min-width="100"></el-table-column>
					<el-table-column label="已用百分比" min-width="100" :formatter="returnUsagePercentum" />
				</el-table>
			</chart-card>
		</div>
	</div>
</template>

<script>
import chartCard from './chartCard';
import { getNetMonitorData } from '@/api/openApi';
export default {
	components: { chartCard },
	data() {
		return {
			loading: true,
			serverData: {}
		};
	},
	computed: {
		cpuData() {
			return this.serverData.cpu || {};
		},
		memData() {
			return this.serverData.mem || {};
		},
		jvmData() {
			return this.serverData.jvm || {};
		},
		sysData() {
			return this.serverData.sys || {};
		},
		sysFiles() {
			return this.serverData.sysFiles || [];
		}
	},
	mounted() {
		this.loading = true;
		this.getServerData();
	},
	methods: {
		async getServerData() {
			let result = await getNetMonitorData().then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.serverData = this.$detailData(result.data);
			}
		},
		returnUsagePercentum(data) {
			return `${parseFloat(data.usage)}%`;
		}
	}
};
</script>

<style lang="scss" scoped>
.network_monitoring {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: #f5f7fa;
	height: calc(100vh - 123px);
}

.hardware_info {
	flex-shrink: 0;
	margin-bottom: 16px;
}

.java_information {
	flex-shrink: 0;
	margin-bottom: 16px;
}

.disk_information::v-deep {
	flex: 1;
	overflow: hidden;
	.el-table .cell {
		padding: 0 16px;
	}
	.el-table th {
		background-color: #f2f6fc;
	}
}

.descriptions_style::v-deep {
	display: block;
	padding: 10px 0;
	font-size: 16px;
	.el-descriptions-item__cell {
		border: none;
		padding: 6px 16px;
	}
	.el-descriptions-item__label {
		width: 100px;
		padding-right: 0;
		background: none;
	}
}
</style>
